<template>
  <div class="footer-container">
    <div class="footer-box">
      <div class="logo-info flex-y-center">
        <img src="@/assets/img/logo.png" class="logo" alt="" />
        <span class="name">设备租赁</span>
      </div>
      <div class="flex">
        <ul v-for="(item, index) in linksList" :key="index" class="ul-box">
          <li class="li-title">{{ item.name }}</li>
          <li class="li-item" v-for="(child, i) in item.children" :key="i">
            <router-link :to="child.url" class="li-item"
              ><span> {{ child.name }}</span></router-link
            >
          </li>
        </ul>
      </div>
      <div class="qrcode-wrapper flex-column-xy-center">
        <img src="@/assets/img/qrcode.png" />
        <span>小程序二维码</span>
      </div>
    </div>
    <div class="copyright flex-xy-center">© 2022 平台公司名称 | ICP备17018421号-1</div>
  </div>
</template>

<script>
export default {
  name: "PageFooter.vue",

  data() {
    return {
      linksList: [
        {
          name: "规则介绍",
          url: "",
          children: [
            { name: "平台规则", url: "/richText" },
            { name: "担保规则", url: "/richText" },
            { name: "会员规则", url: "/richText" },
          ],
        },
        {
          name: "操作指南",
          url: "",
          children: [
            { name: "用户指南", url: "/richText" },
            { name: "店铺指南", url: "/richText" },
            { name: "商家指南", url: "/richText" },
          ],
        },
        {
          name: "关于我们",
          url: "",
          children: [
            { name: "平台介绍", url: "" },
            { name: "支付保障", url: "" },
          ],
        },
      ],
    };
  },

  methods: {
    // method
  },
};
</script>

<style lang="scss" scoped>
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #1e1e1e;
  padding-top: 1px;

  .footer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    height: 350px;

    .logo-info {
      .logo {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        margin-right: 20px;
      }

      .name {
        font-weight: 800;
        font-size: 25px;
        color: #ffffff;
      }
    }
  }

  .ul-box {
    padding-right:100px;

    .li-title {
      font-weight: 400;
      font-size: 18px;
      color: #c4c4c4;
      margin-bottom: 30px;
    }

    .li-item {
      margin-bottom: 30px;
      font-size: 16px;
      color: #8d8d8d;
      cursor: pointer;
    }

    .li-item:hover {
      text-decoration: underline;
    }
  }

  .ul-box:last-child {
    border-right: 1px solid #383838;
  }

  .qrcode-wrapper {
    img {
      width: 2.125rem;
      height: 2.125rem;
      margin-bottom: 20px;
    }

    span {
      font-weight: 400;
      font-size: 0.2rem;
      color: #ffffff;
    }
  }

  .copyright {
    width: 1200px;
    font-weight: 400;
    font-size: 16px;
    color: #c8c8c8;
    padding: 0.4125rem 0;
    border-top: 1px solid #383838;
  }
}

ul,
li {
  list-style: none;
}
</style>
